<template>
  <div id="content" tabindex="1" @keydown="keydown($event)">
    <div id="box"></div>
  </div>
</template>

<script>
export default {
    data() {
        return {

            left: 0,
            top1:0,
            deg:0
        }
    },
    methods:{
        keydown(e){
            console.log(e.keyCode)
            switch(e.keyCode){
                case 37:
                this.left -= 50
                break;
                case 38:
                this.top1 -= 50
                break;
                case 39:
                this.left += 50
                break;
                case 40:
                this.top1 += 50
                break;
                case 32:
                this.deg += 90
                break;
            }
            let box = document.getElementById('box')
            //console.log(box)
            box.style.left = this.left + 'px'
            box.style.top = this.top1 + 'px'
            console.log(this.deg)
            box.style.transform = `rotate(${this.deg}deg)`
        }
    }
}
</script>

<style scoped>
/* *{
position: relative;
top: 0;
left: 0;
} */

#content {
    margin: 0 auto;
    width: 600px;
    border: 1px solid black;
    height: 500px;
}
#box {
    height: 50px;
    width: 100px;
    background-color: black;
    position: relative;
    top: 0;
    left: 0;
}
</style>